<template>
  <div class="permissions-info">
    <el-page-header @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3">权限说明</span>
      </template>
    </el-page-header>

    <el-card style="margin-top: 20px;">
      <template #header>
        <div style="display: flex; align-items: center;">
          <el-icon style="margin-right: 8px;"><InfoFilled /></el-icon>
          <span>角色权限说明</span>
        </div>
      </template>

      <el-descriptions :column="1" border>
        <el-descriptions-item label="游客">
          <div class="permission-detail">
            <p><strong>权限范围：</strong></p>
            <ul>
              <li>✅ 浏览景点列表和详情</li>
              <li>✅ 查看分享的路线</li>
              <li>✅ 浏览用户动态</li>
              <li>✅ 查看景点排行榜</li>
              <li>✅ 查看地图总览</li>
            </ul>
            <p><strong>限制：</strong></p>
            <ul>
              <li>❌ 不能评价景点</li>
              <li>❌ 不能收藏景点</li>
              <li>❌ 不能规划路线</li>
              <li>❌ 不能发布动态</li>
              <li>❌ 不能创建行程</li>
            </ul>
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="普通用户">
          <div class="permission-detail">
            <p><strong>权限范围：</strong></p>
            <ul>
              <li>✅ 所有游客权限</li>
              <li>✅ 评价景点</li>
              <li>✅ 收藏景点</li>
              <li>✅ 规划路线并保存</li>
              <li>✅ 创建和管理行程</li>
              <li>✅ 发布动态和评论</li>
              <li>✅ 查看个人空间</li>
            </ul>
            <p><strong>限制：</strong></p>
            <ul>
              <li>❌ 不能管理景点数据</li>
              <li>❌ 不能管理其他用户</li>
              <li>❌ 不能审核内容</li>
              <li>❌ 不能查看系统统计</li>
            </ul>
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="管理员">
          <div class="permission-detail">
            <p><strong>权限范围：</strong></p>
            <ul>
              <li>✅ 访问管理员后台</li>
              <li>✅ 管理景点信息（添加、编辑、删除）</li>
              <li>✅ 管理用户账号和权限</li>
              <li>✅ 审核和管理内容（动态、评论）</li>
              <li>✅ 查看系统统计数据</li>
              <li>✅ 数据导出功能</li>
              <li>✅ 系统配置管理</li>
            </ul>
            <p><strong>说明：</strong></p>
            <ul>
              <li>⚠️ 管理员应通过管理后台操作，不使用普通用户功能模块</li>
              <li>⚠️ 管理员不能评价景点或发布个人动态</li>
            </ul>
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <el-divider />

      <div class="contact-section">
        <h3>需要更多权限？</h3>
        <p>如果您需要申请权限升级，请联系系统管理员。</p>
        <el-button type="primary" @click="goBack">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue'

export default {
  name: 'PermissionsInfo',
  components: {
    InfoFilled
  },
  setup() {
    const router = useRouter()

    const goBack = () => {
      router.go(-1)
    }

    return {
      goBack
    }
  }
}
</script>

<style scoped>
.permissions-info {
  /* 南昌旅游特色：天空蓝渐变背景 */
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%);
  min-height: 100vh;
  padding: 20px;
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.permissions-info {
  max-width: 1200px;
  margin: 0 auto;
}

.permission-detail {
  padding: 10px 0;
}

.permission-detail p {
  margin: 10px 0;
  font-size: 14px;
}

.permission-detail ul {
  margin: 10px 0;
  padding-left: 20px;
}

.permission-detail li {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.6;
}

.contact-section {
  text-align: center;
  padding: 20px;
}

.contact-section h3 {
  margin-bottom: 10px;
  color: #303133;
}

.contact-section p {
  margin-bottom: 20px;
  color: #606266;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  width: 150px;
}

:deep(.el-descriptions__content) {
  padding: 15px;
}
</style>

